import React,{ PureComponent } from 'react'
import PubSubJS from 'pubsub-js'
import { TabBar } from 'antd-mobile'

import cookbook from "assets/cookbook.png"
import cookbookActive from "assets/cookbook-active.png"
import location from "assets/location.png"
import locationActive from "assets/location-active.png"
import menu from "assets/menu.png"
import menuActive from "assets/menu-active.png"
import more from "assets/more.png"
import moreActive from "assets/more-active.png"

import { Cookbook, Category, Foodmap, More } from "../index"

export default class Tab extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: "cookBook",
      hidden: false,
      fullScreen: true,
      mapTabBarShow: true
    };
  }

  componentDidMount() {
    this.token = PubSubJS.subscribe("mapShowChecked", (_, data) => {
      this.setState({mapTabBarShow: data.mapTabBarShow})
    })
  }

  componentWillUnmount() {
    PubSubJS.unsubscribe(this.token)
  }

  renderContent(pageText) {
    return (
      <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
        <div style={{ paddingTop: 60 }}>Clicked “{pageText}” tab， show “{pageText}” information</div>
        <a style={{ display: 'block', marginTop: 40, marginBottom: 20, color: '#108ee9' }}
          onClick={(e) => {
            e.preventDefault();
            this.setState({
              hidden: !this.state.hidden,
            });
          }}
        >
        </a>
        <a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
          onClick={(e) => {
            e.preventDefault();
            this.setState({
              fullScreen: !this.state.fullScreen,
            });
          }}
        >
        </a>
      </div>
    );
  }

  render() {
    return (
      <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
        <TabBar
          unselectedTintColor="#666"
          tintColor="#000"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          {
            [
              <TabBar.Item
              title="美食大全"
              key="cookBook"
              icon={<div style={{
                width: '22px',
                height: '22px',
                background: `url(${cookbook}) center center /  21px 21px no-repeat` }}
              />
              }
              selectedIcon={<div style={{
                width: '22px',
                height: '22px',
                background: `url(${cookbookActive}) center center /  21px 21px no-repeat` } }
              />
              }
              selected={this.state.selectedTab === 'cookBook'}
              onPress={() => {
                this.setState({
                  selectedTab: 'cookBook',
                });
              }}
            >
            <Cookbook />
            </TabBar.Item>,
            <TabBar.Item
              icon={
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${menu}) center center /  21px 21px no-repeat` }}
                />
              }
              selectedIcon={
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${menuActive}) center center /  21px 21px no-repeat` }}
                />
              }
              title="分类"
              key="category"
              selected={this.state.selectedTab === 'category'}
              onPress={() => {
                this.setState({
                  selectedTab: 'category',
                });
              }}
            >
            <Category />
            </TabBar.Item>,
            <TabBar.Item
              icon={
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${location}) center center /  21px 21px no-repeat` }}
                />
              }
              selectedIcon={
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${locationActive}) center center /  21px 21px no-repeat` }}
                />
              }
              title="美食地图"
              key="cookMap"
              selected={this.state.selectedTab === 'cookMap'}
              onPress={() => {
                this.setState({
                  selectedTab: 'cookMap',
                });
              }}
            >
            <Foodmap/>
            </TabBar.Item>,
            <TabBar.Item
              icon={{ uri: more }}
              selectedIcon={{ uri: moreActive }}
              title="更多"
              key="more"
              selected={this.state.selectedTab === 'more'}
              onPress={() => {
                this.setState({
                  selectedTab: 'more',
                });
              }}
            >
            <More />
            </TabBar.Item>
            ].filter((item, index) => {
              return (index === 2 && this.state.mapTabBarShow) || index !== 2
            })
          }
        </TabBar>
      </div>
    );
  }
}